<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<title>更多展示</title>
	</head>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<!--用导航条写一个头部-->

		<head>
			<div class="navbar navbar-default container" id="header" style="z-index: 2;background-color: white;border: none;">
				<div class="navbar-header">
					<a class="navbar-brand" href="">着华夏之裳，兴礼仪之邦</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#shownav">
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		    </button>
				</div>
				<ul id="shownav" class="nav navbar-nav collapse navbar-collapse navbar-right">
					<li>
						<a href="/index"> <span class="glyphicon glyphicon-home"></span>首页</a>
					</li>
					<li>
						<a href="/lishi"><span class="glyphicon glyphicon-chevron-right"></span>历史</a>
					</li>
					<li>
						<a href="/xingzhi"><span class="glyphicon glyphicon-heart-empty"style="padding-right: 5px;"></span>形制</a>
					</li>
					<li>
						<a href="/zhoubian"><span class="glyphicon glyphicon-hand-right" style="padding-right: 5px;"></span>更多展示</a>
					</li>
				</ul>
			</div></head>
		<!--四张图片的一个轮播效果呀-->
		<div class="container" style="margin-top: -19px;">
			<div id="myCarousel" class="carousel slide">
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
					<li data-target="#myCarousel" data-slide-to="3"></li>
				</ol>
				<div class="carousel-inner">
					
					<div class="item active">
						<img src="img/A7.jpg" width="1200" height="600"class="active" data-toggle="tooltip" data-placement="right" alt="第一张" title="图片一啊">
						<div class="carousel-caption">
							<h3 class="carousel-title hidden-xs">簪子</h3>
							<p class="carousel-body">ZANZI/ISO</p>
						</div>
					</div>

					<div class="item">
						<img src="img/A8.jpg" width="1200" height="600"class="" alt="第二张">
						<div class="carousel-caption">
							<h3 class="carousel-title hidden-xs">扇子</h3>
							<p class="carousel-body">SHANZI/ISO</p>
						</div>
					</div>
					<div class="item">
						<img src="img/A9.jpg" width="1200" height="600"class="" alt="第三张">
						<div class="carousel-caption">
							<h3 class="carousel-title hidden-xs">绣鞋</h3>
							<p class="carousel-body">XIUXIE/ISO</p>
						</div>
					</div>
					<div class="item">
						<img src="img/A10.jpg"width="1200" height="600" class="" alt="第四张">
						<div class="carousel-caption">
							<h3 class="carousel-title hidden-xs">佩玉</h3>
							<p class="carousel-body">PEIYU/ISO</p>
						</div>
					</div>
				</div>
				<a href="#myCarousel" data-slide="prev" class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span> </a>
				<a href="#myCarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
		<!--中间内容    ，就是一些文字，用了文字居中而已-->

		<body>
			<p></p>

			<div class="container">
			<div class="row centered">
			  <h2 class="centered">绝美汉服周边</h2>
			  <hr>
			  <div class="col-md-12">
				  <div class="col-lg-3 centered"> <img class="img img-circle" src="img/zhoubian/team01.jpg" height="120px" width="120px" alt="">
				    <h4>扇子</h4>
				    <p>在中国，“圆”就是“团圆”，所以人们把圆形或近似圆形的扇子都称为“团扇”，也称宫扇、纨扇。团扇是中国本土智慧的结晶，与人们的生活的息息相关，不仅是引风纳凉的工具，也是女子遮羞的配饰。“翩翩公子手拿折扇，吟诗作赋，竞逐风流；大家闺秀手执团扇，半掩脸面，秋波暗送。”</p>
				    </div>
				    
				  <div class="col-lg-3 centered"> <img class="img img-circle" src="img/zhoubian/team02.jpg" height="120px" width="120px" alt="">
				    <h4>簪子</h4>
				    <p>簪是指用来固定和装饰头发的一种发饰，古时汉族女子插笄是长大成人的一种标志，到时还要举行仪式，行“笄礼”。古代发笄形式繁多，仅以质料上看，就有骨、石、陶、蚌、荆、竹、木、玉、铜、金、象牙、牛角及玳瑁等多种。。</p>
				    </div>
				  
				  <div class="col-lg-3 centered"> <img class="img img-circle" src="img/zhoubian/team03.jpg" height="120px" width="120px" alt="">
				    <h4>绣鞋</h4>
				    <p>绣花鞋的刺绣修饰手法沿袭了东方装饰唯美的审美风尚，注重鞋面的章法，和鞋帮的铺陈，并配以鞋口、鞋底的工艺饰条。应用彩色丝线从鞋头到鞋跟甚至鞋底和鞋垫上都绣上繁缛华丽的纹样。</p>
				    </div>
				  
				  <div class="col-lg-3 centered"> <img class="img img-circle" src="img/zhoubian/team04.jpg" height="120px" width="120px" alt="">
				    <h4>佩玉</h4>
				    <p>在中国传统文化里有着不可替代的作用，玉乃是吉祥之饰物，玉是一种有灵气的宝物，一块上好的玉件能给人带来好运，趋吉避凶，佩玉石可养生，身上佩玉可防疾病，佩玉则百邪不侵。</p>
				    <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div>
				  <div class="col-lg-8 col-lg-offset-2 centered">
				  
			  </div>
			
			    
			  </div>
			</div>
			</div>
			 </body>
		<!--底部-->
<div id="contact" name="contact">
  <div class="container">
    <div class="row">
      <h2 class="centered">留言：</h2>
      <hr>
    </div>
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 centered">
        <p>给我们留言以改进我们的网站：</p>
        <form id="contact" method="post" class="form" role="form">
          <div class="row">
            <div class="col-xs-6 col-md-6 form-group">
              <input class="form-control" id="name" name="name" placeholder="姓名" type="text" required />
            </div>
            <div class="col-xs-6 col-md-6 form-group">
              <input class="form-control" id="phone" name="phone" placeholder="电话" type="phone" required />
            </div>
          </div>
          <textarea class="form-control" id="message" name="message" placeholder="建议..." rows="5"></textarea>
          <div class="row">
            <div class="col-xs-12 col-md-12">
              <button class="btn btn-success" type="submit" style="margin-bottom: 50px; margin-left: 700px; margin-top: 20px;">留言</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

		<script src="js/jquery1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#myCarousel').carousel({
				interval: 3000,
			})
			$('.item img').tooltip();
		</script>
	</body>

</html>